﻿<template>
  <div class="profile-page">
    <el-header class="">
      <span style="color: black" class="title">个人中心</span>
    </el-header>
    <el-main>
      <div class="avatar-and-name" style=" display: flex; justify-content: space-between; align-items: center;">
        <div class="avatar-name-group" style="display: flex; align-items: center;">
          <van-image
              round
              :src="this.user.avatar"
              width="40"
              height="40"
          />
          <div class="name-container" @click="geren()">
            <span>{{ user.name }}</span>
            <van-icon name="arrow" size="12"/>
          </div>
        </div>
        <div @click="geren()">
          <van-icon name="setting-o"/>
        </div>
      </div>
      <br>
      <br>

      <div style="width: 97%;height: 140px;background-color: #333;border-radius: 12px">
        <div class="wdh" style="color: #edbf98">
          <div class="puls-member">
            <van-icon name="diamond" color="pink" size="16"/>
            PULS会员
          </div>
          <div class="go-open" style="color: #edbf98" @click="Member()">去开通</div>
        </div>
        <div class="order-status"
             style="border-radius: 12px;background-color: white;width: 100%;height: 86px;padding-top: 10px">
          <van-grid column-num="5" style="width: 500px;border-radius: 8px;background-color: red">
            <van-grid-item icon="paid" text="待付款" @click="findOrderInfo(1)"/>
            <van-grid-item icon="icon iconfont icon-daishouhuo" text="待收货" @click="findOrderInfo(3)"/>
            <van-grid-item icon="notes-o" text="待评价" @click="findOrderInfo(4)"/>
            <van-grid-item icon="icon iconfont icon-tuihuanhuo" text="退换货" @click="findOrderInfo(0)"/>
            <van-grid-item icon="icon iconfont icon-dingdan" text="全部订单" @click="findOrderInfo(0)"/>
          </van-grid>
        </div>

      </div>
      <br>
      <el-row class="wallet-info">
        <el-col span="6">
          <i class="el-icon-wallet"></i><br>
          <el-icon class="icon-size"></el-icon>
          <span @click="yu()">账户余额</span>
        </el-col>
        <el-col span="6" >
          <span>{{num}}个</span><br>
          <el-icon class="icon-size"></el-icon>
          <span @click="ji()">积分</span>
        </el-col>
        <el-col span="6">
          <i class="el-icon-coupon">0张</i><br>
          <el-icon class="icon-size"></el-icon>
          <span @click="onCoupon()">优惠券</span>
        </el-col>
        <el-col span="6">
          <i class="el-icon-s-finance"></i><br>
          <el-icon class="icon-size"></el-icon>
          <span @click="yu()">我的钱包</span>
        </el-col>
      </el-row>
      <el-row class="features">
        <el-col span="6">
          <i class="el-icon-star-off"></i><br>
          <span @click="shoucang()">商品收藏</span>
        </el-col>
        <el-col span="6">
          <i class="el-icon-view"></i><br>
          <span @click="zuji('browseHistory')">浏览足迹</span>
        </el-col>
        <el-col span="6">
          <i class="el-icon-goods"></i><br>
          <span @click="pointMall()">积分商城</span>
        </el-col>
        <el-col span="6">
          <i class="el-icon-s-custom"></i><br>
          <span @click="pin()">我的拼团</span>
        </el-col>

      </el-row>
      <el-row class="features">
        <el-col span="6">
          <i class="el-icon-chat-dot-square"></i><br>
          <el-icon class="icon-size"></el-icon>
          <span @click="chang()">常见问题</span>
        </el-col>
        <el-col span="6">
          <i class="el-icon-setting"></i><br>
          <el-icon class="icon-size"></el-icon>
          <span @click="shezhi()">系统设置</span>
        </el-col>
        <el-col span="6">
          <i class="el-icon-share"></i><br>
          <el-icon class="icon-size"></el-icon>
          <span @click="fenxiao()">分销中心</span>
        </el-col>
        <el-col span="6">
          <i class="el-icon-collection"></i><br>
          <el-icon class="icon-size"></el-icon>
          <span @click="handleClick('leader-application')">团长申请</span>
        </el-col>
      </el-row>
    </el-main>


    <el-footer class="bottom-ad">

      <img src="https://img0.baidu.com/it/u=772450091,3447462396&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1069"
           alt="advertisement" class="ad-banner" height="150px"/>

    </el-footer>

    <van-tabbar v-model="active">

      <van-tabbar-item icon="home-o" @click="shouye()">首页</van-tabbar-item>

      <van-tabbar-item icon="apps-o" @click="fenlei()">分类</van-tabbar-item>

      <van-tabbar-item icon="shop-o" @click="mendian()">门店</van-tabbar-item>

      <van-tabbar-item icon="contact-o" @click="wode()">我的</van-tabbar-item>

    </van-tabbar>

  </div>

</template>


<script>

import {Dialog} from "vant";
import {findIntegral, findUserById} from "@/api/wode/user";

export default {

  data() {
    return {
      active: 3,
      // 假设有更多数据和逻辑配置
      user: {},
      num:null
    };
  },
  methods: {
    findIntegral() {
      findIntegral(localStorage.getItem("token")).then(res => {
        if (res.num==null){
          this.$message.warning("请先登录")
          localStorage.removeItem('token')
          this.$router.push('/')
        }
        this.num = res.num
      })
    },
    findUser() {
        findUserById(localStorage.getItem('token')).then(res => {
          if (res.code == 208){
            this.$message.error(res.message)
            localStorage.removeItem('token')
            this.$router.push('/')
          }
          this.user = res.data

        }).catch(error => {
          console.log(error)
        })
    },
    chang() {
      this.$router.push('/changjian')
    },
    handleChange(activeNames) {
      this.activeNames = activeNames
    },
    zuji() {
      this.$router.push('/browseHistory')
    },
    ji() {
      this.$router.push('/points')
    },
    fenxiao() {
      this.$router.push('/fenxiao')
    },
    yu() {
      this.$router.push('/yue')
    },
    shoucang(){
      this.$router.push('/shoucang')
    },
    shezhi() {
      this.$router.push('/shezhi')
    },
    findOrderInfo(row) {
      this.$router.push({path: '/orderinfo', query: {row: row}})
    },
    Member() {
      if (localStorage.getItem('token') == null) {
        Dialog.confirm({
          title: '提示',
          message: '请先登录'
        }).then(() => {
          // 点击确定时的操作
          this.$router.push('/')
        }).catch(() => {
          // 点击取消时的操作
          this.$toast('已取消');
        });
        this.$router.push('/')
      } else {
        this.$router.push('/membercenter')
      }
    },
    onCoupon() {
      this.$router.push('/coupon')
    },
    handleClick() {
      this.$router.push('/tuanzhang')
    },
    pointMall() {
      this.$router.push('/jifen')
    },
    geren() {
      this.$router.push('/geren')
    },
    pin() {
      this.$router.push('/pin')
    },
    shouye() {
      this.$router.push('/shouye')
    },
    fenlei() {
      this.$router.push('/fenlei')
    },
    mendian() {
      this.$router.push('/mendian')
    },
    wode() {
      this.$router.push('/wode')
    }
  },
  created() {
    // 调用actions
    this.findUser()
    this.findIntegral()
  }
};
</script>
<style scoped>
.wdh {
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
}

.profile-info {
  display: flex;
  align-items: center;
  padding: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.username {
  font-size: 18px;
  margin-left: 10px;
}

.icon-size {
  margin-right: 5px;
  font-size: 16px;
}

.membership .el-card__header {
  display: flex;
  justify-content: space-between;
}

.order-status,
.wallet-info,
.features {
  text-align: center;
  margin: 10px 0;
}

.ad-banner {
  width: 100%;
  object-fit: cover;
}

.wdh {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  color: white;
  padding: 10px;
}

.puls-member {
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.go-open {
  color: pink;
}

.order-status {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.iconfont {
  font-size: 34px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 1px;
  -moz-osx-font-smoothing: grayscale;
}

.avatar-container {
  /* 可以根据实际需求添加其他样式，比如背景色、内边距等 */
  padding: 5px;
}

.avatar-and-name {
  display: flex;
  align-items: center;
}

.avatar-container.avatar-and-name.van-image {
  margin-right: 5px; /* 给头像和用户名之间添加一点间距 */
}

.name-container {
  font-size: 14px;
}
</style>
